<template lang="pug">
    div
        h1 用户统计
        Card
            p(slot="title") 总用户量
            Row
                Col(span="6")
                    div(id="user_total_sex", style="height: 300px; width: 100%;")
                Col(span="18")
                    div(id="user_total", style="height: 300px; width: 100%;")
        Card
            p(slot="title") 今日新增用户
            div(id="user_increase", style="height: 300px; width: 100%;")
        Card
            p(slot="title") 今日活跃用户
            div(id="user_active", style="height: 300px; width: 100%;")

</template>

<script>
    const urls = [
        'tools_statistics/getRegisterCount',
        'tools_statistics/getTodayRegisterCount',
        'tools_statistics/getTodayOnlineCount',
    ];

    export default {
        async mounted() {
            const [total, today, active] = await Promise.all(urls.map(url => this.$http.post(url)));

            // 画三个折线图
            this.$showLine('user_total', total.day_count,   '总用户量');
            this.$showLine('user_increase', today.hour_count, '今日新增用户', true);
            this.$showLine('user_active', active.hour_count, '今日活跃用户');

            // 再画一个饼图
            const [m, w] = [1, 0].map(sex => total.sex_count.find(e => e.sex === sex).count);

            this.$echarts.init(this.$gEBI('user_total_sex')).setOption({
                title : {
                    text: `共有 ${m + w} 人`,
                    subtext: `男 ${m} 人，女 ${w} 人`,
                    x:'center',
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        data:[
                            {value:m, name:'♂'},
                            {value:w, name:'♀'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    }
</script>

<style lang="stylus" scoped>
    .ivu-card
        margin-top 40px
</style>
